import React, { PureComponent } from 'react'
import { Modal, Table, Form, Input } from 'antd'
import PropTypes from 'prop-types'
import { getPriceFilter } from 'utils/utils'

const { TextArea } = Input
// import Style from './costModal.css'

const EditableContext = React.createContext()

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputType === 'number') {
      return (
        <Input
          style={{ width: 150 }}
          // step={0.01}
          min={0}
          prefix='¥'
        />
      )
    }
    return <TextArea />
  };

  renderCell = ({ getFieldDecorator }) => {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      children,
      rules,
      ...restProps
    } = this.props
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item style={{ margin: 0 }}>
            {getFieldDecorator(dataIndex, {
              rules,
              validateTrigger: 'onBlur',
              initialValue: inputType === 'number' ? record[dataIndex] / 100 : record[dataIndex]
            })(this.getInput())}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    )
  };

  render () {
    return <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
  }
}

class costModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    init: PropTypes.array,
    form: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.state = {
      dataSource: []
    }
  }

  static getDerivedStateFromProps (nextProps, prevState) {
    if (prevState.init !== nextProps.init) {
      return {
        dataSource: nextProps.init
      }
    }
    return null
  }

  getCostInfoCol = () => {
    return [
      {
        title: '商品合计',
        dataIndex: 'commodityPriceCount',
        render: n => `¥${getPriceFilter(n)}`
      },
      {
        title: '实际价格',
        key: 'orderAmount',
        dataIndex: 'orderAmount',
        // render: n => `¥${getPriceFilter(n)}`,
        editable: true,
        rules: [
          { required: true, message: '请输入实际价格' },
          { pattern: /^\d*\.?\d*$/, message: '请输入正确的金额' }
        ]
      },
      {
        title: '优惠',
        dataIndex: 'preferentialAmount',
        render: n => `¥${getPriceFilter(n)}`

      },
      {
        title: '优惠理由',
        key: 'preferentialReason',
        dataIndex: 'preferentialReason',
        editable: true
      }
    ]
  }

  handleOk = () => {
    const { onOk, form } = this.props
    console.log('handleOk')
    form.validateFields((err, values) => {
      if (!err) {
        onOk(values)
      }
    })
  }

  handleCancel = () => {
    const { onCancel, form } = this.props
    form.resetFields()
    onCancel()
  }

  render () {
    const components = {
      body: {
        cell: EditableCell
      }
    }
    const { visible, form } = this.props
    const { getFieldDecorator } = form
    const { dataSource } = this.state
    const columns = this.getCostInfoCol().map(col => {
      if (!col.editable) {
        return col
      }
      return {
        ...col,
        onCell: record => ({
          record,
          rules: col.rules,
          inputType: col.dataIndex === 'orderAmount' ? 'number' : 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: true
        })
      }
    })
    return (
      <EditableContext.Provider value={form}>
        <Modal
          title='修改费用信息'
          visible={visible}
          onCancel={this.handleCancel}
          onOk={this.handleOk}
          width='700px'
        >
          <Table components={components} columns={columns} pagination={false} dataSource={dataSource} />

          <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ marginTop: 20 }}>
            <Form.Item label='修改原因' >
              {getFieldDecorator('changeReason', {
                rules: [{ required: true, message: '请输入修改原因' }]
              })(<TextArea />)}
            </Form.Item>
          </Form>
        </Modal>

      </EditableContext.Provider>
    )
  }
}

export default Form.create()(costModal)
